<template>
	<view class="register_page">
		<!-- 这里是状态栏 -->
		<!-- <view class="status_bar" :style="{ height: iStatusBarHeight + 'px'}">
		</view> -->
		<view class="register-container">
			<view class="top_text"><view class="small_text">注册</view></view>
			<!-- 表单 -->
			<view class="login-form">
				<!-- 用户名 -->
				<view class="input-item-box">
					<view class="input-item">
						<input
							placeholder-class="myplaceholder"
							class="login-type-input"
							:class="tipText.email ? 'red' : ''"
							type="text"
							name="email"
							v-model.trim="formParams.account"
							placeholder="请输入用户名"
							maxlength="30"
						/>

						<image v-show="formParams.account" class="del_icon pass-icon" src="../../static/img/login/clear.png" alt="" @tap="formParams.account = ''"></image>
					</view>
				</view>
				<!-- 手机号码 -->
				<view class="input-item-box">
					<view class="input-item">
						<input
							placeholder-class="myplaceholder"
							class="login-type-input"
							:class="tipText.email ? 'red' : ''"
							type="text"
							name="email"
							v-model.trim="formParams.account"
							placeholder="请输入手机号码"
							maxlength="30"
						/>

						<image v-show="formParams.account" class="del_icon pass-icon" src="../../static/img/login/clear.png" alt="" @tap="formParams.account = ''"></image>
					</view>
				</view>

				<!-- 密码 -->
				<view class="input-item-box">
					<view class="input-item">
						<input
							v-if="!showPass"
							@input="inputPassword"
							class="login-type-input"
							:class="tipText.password ? 'red' : ''"
							placeholder-class="myplaceholder"
							type="password"
							v-model="formParams.password"
							placeholder="请输入验证码"
							maxlength="32"
						/>
						<input
							v-else
							@input="inputPassword"
							class="login-type-input"
							:class="tipText.password ? 'red' : ''"
							placeholder-class="myplaceholder"
							type="text"
							v-model="formParams.password"
							placeholder="请输入验证码"
							maxlength="32"
						/>
						<image @tap="showPass = !showPass" v-if="formParams.password && !showPass" class="pass-icon" src="../../static/img/login/eye2.png" mode=""></image>
						<image @tap="showPass = !showPass" v-if="formParams.password && showPass" class="pass-icon" src="../../static/img/login/eye.png" mode=""></image>
					</view>
				</view>
			</view>

			<view class="login-btn" :class="formParams.account && formParams.password ? 'blue' : null" @tap="loginBtn()">注册</view>

			<view class="readme">
				<view id="mycheckbox"></view>
				<view class="text">我已阅读并同意服务协议及隐私协议</view>
			</view>
		</view>
	</view>
</template>
<script>
import popupLayer from '@/components/xq-popup-layer.vue'
import dropdown from '@/components/xq-dropdown.vue'
import moment from '@/common/moment'
export default {
	components: {
		dropdown,
		popupLayer
	},
	data() {
		return {
			iStatusBarHeight: 0,
			isDowntime: false,

			language: '',
			showPass: false, //是否显示密码
			passError: 0, //密码错误次数
			sortcate: [], //邮箱下拉列表
			currentSort: 0, //当前邮箱索引
			currentEmail: '', //当前邮箱名称
			priCodeImg: '', //图形码url
			//表单参数
			emailText: '', //邮箱前部分
			formParams: {
				account: '',
				password: ''
			},
			tipText: {
				email: false,
				// code: false,
				password: false,
				priCode: false
			},

			codeSeconds: 0, // 验证码发送时间间隔

			smsCodeBtnDisabled: true //邮箱验证码 默认禁用
		}
	},
	onBackPress(options) {
		// 这里可以自定义返回逻辑，比如下面跳转其他页面
		// uni.redirectTo({
		// 	url: "/pages/center_home/order/goods_lst?sta=all"
		// })
		// return true 表示禁止默认返回
		return true
	},
	onLoad(options) {
		var that = this

		// #ifdef H5

		uni.setStorageSync('uuid', 'ASDSADASDASDASD1241234123')
		// #endif
		// -------------------------------

		this.language = uni.getStorageSync('language')

		//邮箱验证码倒计时
		const time = moment().valueOf() / 1000 - uni.getStorageSync('loginSmsCodeTime')
		if (time < 60) {
			this.codeSeconds = 60 - parseInt(time, 10)
			this.handleSmsCodeTime(this.codeSeconds)
		} else {
			//超过60s可重新发送
			this.codeSeconds = 60
			this.smsCodeBtnDisabled = false
			uni.removeStorageSync('loginSmsCodeTime')
		}
	},
	onShow() {
		// if (this.$store.state.isplayactive) {
		// 	this.$store.commit('setIsplayactive', false)
		// 	this.$au_player.stop();
		// }
		// var token = uni.getStorageSync('token')
		// if (token) {
		// 	uni.switchTab({
		// 		url: '/pages/index/index'
		// 	})
		// }
	},
	methods: {
		//点击登录
		loginBtn() {
			this.toLogin()
		},

		//跳转注册页
		toRegisterPage() {
			uni.navigateTo({ url: '/pages/login/register' })
		},
		//忘记密码
		forgetPass() {
			uni.navigateTo({ url: '/pages/login/resetpass' })
		},
		// 验证码登录
		toCodeLogin() {
			uni.navigateTo({ url: '/pages/login/codeLogin' })
		},

		// inputCode() {
		// 	if (this.registerParams.code == '') {

		// 		this.tipText.code = true
		// 	} else {
		// 		this.tipText.code = false
		// 	}
		// },
		inputPassword() {
			if (this.registerParams.password == '') {
				this.tipText.password = true
			} else {
				this.tipText.password = false
			}
		},
		inputPriCode() {
			if (this.registerParams.priCode == '') {
				this.tipText.priCode = true
			} else {
				this.tipText.priCode = false
			}
		},

		// },
		//同时只展开一个下拉框
		// showCate(item) {

		// 	// console.log(item.cate == 'integral'))

		// },

		//邮箱验证码倒计时---保留
		handleSmsCodeTime(time) {
			let timer = setInterval(() => {
				if (time === 0) {
					clearInterval(timer)
					this.smsCodeBtnDisabled = false
				} else {
					this.codeSeconds = time
					this.smsCodeBtnDisabled = true
					time--
				}
			}, 1000)
		},

		// 返回上一页
		navBack() {
			this.$mRouter.back()
		},

		// 登录账号
		toLogin() {
			var that = this
			if (this.isDowntime) {
				return
			}
			this.isDowntime = true
			setTimeout(() => {
				that.isDowntime = false
			}, 2000)

			//表单是否填完
			var isChecked = true
			if (!this.emailText) {
				isChecked = false

				this.tipText['email'] = true
			}
			for (var key in this.registerParams) {
				if (!this.registerParams[key]) {
					isChecked = false
					this.tipText[key] = true
				}
			}

			if (isChecked) {
				//验证邮箱格式
				// var reg =/^[a-zA-Z0-9_-]+([a-zA-Z0-9_-]+)+$/

				// var reg=/\W/
				// if(reg.test(this.registerParams.email)){

				// 	uni.showToast({
				// 		title:'邮箱名称含有特殊字符!',
				// 		icon:'none',
				// 		duration:2000
				// 	})
				// 	return
				// }

				//验证密码
				var reg = /\W/
				if (reg.test(this.registerParams.password)) {
					uni.showToast({
						title: '密码含有特殊字符!',
						icon: 'none',
						duration: 2000
					})
					return
				}
				//排除下划线
				if (this.registerParams.password.indexOf('_') != -1) {
					uni.showToast({
						title: '密码含有特殊字符!',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (this.registerParams.password.length < 6) {
					uni.showToast({
						title: '密码长度过短!',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (this.registerParams.password.length > 32) {
					uni.showToast({
						title: '密码长度超出限制!',
						icon: 'none',
						duration: 2000
					})
					return
				}

				//邀请码非空判断,前面一验证

				// http
				uni.showLoading({ title: '' })
				var newParams = {}
				newParams.account = this.registerParams.email
				newParams.password = this.registerParams.password
				newParams.captcha = this.registerParams.priCode
				newParams.random = this.registerParams.random
				console.log('newParams', newParams)
				this.$request.login(newParams).then(res => {
					uni.hideLoading()
					if (res.data.code == 1) {
						uni.setStorageSync('userInfo', res.data.data.userinfo)
						uni.setStorageSync('token', res.data.data.userinfo.token)
						uni.setStorageSync('uid', res.data.data.userinfo.id)

						var isHas = false
						var cid = res.data.data.userinfo.id
						var iddata = res.data.data.ids

						if (iddata) {
							iddata.forEach(item => {
								if (Number(item) == Number(cid)) {
									isHas = true
								}
							})

							if (isHas) {
								uni.setStorageSync('isImportBar', cid)
							} else {
								var curStatus = uni.getStorageSync('isImportBar')
								if (curStatus) {
									uni.removeStorageSync('isImportBar')
								}
							}
						}

						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						})
						setTimeout(() => {
							uni.switchTab({ url: '/pages/index/index' })
						}, 500)
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						})
						that.registerParams.priCode = ''
					}
				})
			}
		}
	}
}
</script>
<style lang="scss">
page {
	height: 100%;
	background-color: #fff;
}

.status_bar {
	width: 100%;
}

.uni-list {
	text-align: center;
	color: #8c9fad;
	font-size: 28upx;
}

#mycheckbox {
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 2px solid #d8d8d8;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	vertical-align: sub;
	float: right;
	position: relative;
}

#mycheckbox:checked {
	background-color: #d8d8d8;
}

#mycheckbox:checked::after {
	content: '';
	position: absolute;
	left: 3px;
	top: 3px;
	height: 6px;
	width: 10px;
	border: 2px solid #fff;
	border-top: none;
	border-right: none;
	transform: rotate(-45deg);
}

.register_page {
	display: flex;
	// align-items: center;
	height: 100%;

	.register-container {
		width: 100%;
		position: relative;

		.top_text {
			// margin-top: 132px;
			padding: 120px 64px 108upx;
			box-sizing: border-box;

			.big_text {
				margin-bottom: 8upx;
				font-size: 80upx;
				font-family: PingFang SC-中黑体, PingFang SC;
				font-weight: normal;
				color: #000000;
			}

			.small_text {
				font-size: 40upx;
				font-family: PingFang SC-常规体, PingFang SC;
				font-weight: normal;
				color: #000000;
			}
		}

		.login-form {
			width: 100%;
			padding: 0 64upx;
			box-sizing: border-box;

			.input-item-box {
				.hidden {
					opacity: 0;
				}
			}

			.input-item {
				margin-bottom: 8px;
				display: flex;
				align-items: center;
				height: 100upx;
				// margin-bottom: 20upx;
				border-bottom: 1upx solid rgba(0, 0, 0, 0.1);

				.left-icon {
					margin: 0 33upx;
					width: 36upx;
					height: 36upx;
				}

				.pass-icon {
					margin: 0 33px;
					width: 32px;
					height: 32px;
				}

				.myplaceholder {
					color: #aab1c1;
				}

				.login-type-input {
					flex: 1;
					height: 80upx;
					color: #bfbfbf;
					font-size: 28upx;

					&.red {
						color: D64B43;
					}
				}

				.zhankai {
					margin-left: 10upx;
					color: #777d8b;
					font-size: 32upx;
				}

				.emmail-box {
					// padding-left: 20upx;
					// box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: center;
					// margin-right: 16upx;
					width: 208upx;
					height: 100%;
				}

				.sms-code-btn,
				.sms-code-resend {
					margin-right: 33upx;
					width: 208upx;
					text-align: center;
					font-size: $font-base - 2upx;
				}

				.sms-code-btn.pricode-box {
					width: 240upx;
					height: 100%;
					// display: flex;
					align-items: center;

					.pricode-img {
						width: 100%;
					}

					.img-mask {
						position: absolute;
						top: 0;
						width: 100%;
						height: 100%;
						// z-index: 999;
					}
				}
			}

			.input-item-sms-code {
				position: relative;
				width: 100%;

				.sms-code-btn {
					position: absolute;
					height: 90upx;
					line-height: 90upx;
					color: #111;
					right: 0;
					bottom: 0;
					font-size: 28px;
					font-family: MiSans-Regular, MiSans;
					font-weight: 400;
					color: #177fff;
				}

				.sms-code-resend {
					color: #999;
				}

				.sms-code-btn:after {
					border: none;
					background-color: transparent;
				}
			}
		}

		.mycheckbox-row {
			margin-top: 20upx;
			padding-left: 30upx;
			display: flex;
			align-items: center;

			.iconfont-size {
				margin-left: 30upx;
				font-size: 42upx;
			}

			.color-grey {
				color: #aab1c1;
			}

			.color-green {
				color: #13a467;
			}

			.checkbox-text {
				margin-bottom: 4upx;

				text {
					color: #13a467;
				}
			}
		}

		.back-btn {
			position: absolute;
			left: 40upx;
			z-index: 9999;
			padding-top: var(--status-bar-height);
			top: 40upx;
			font-size: 48upx;
			color: $color-white;
			width: 50upx;
			height: 34upx;
		}

		//邮箱登录标题
		.email-login {
			font-family: HYQiHei-FZS;
			margin-bottom: 80upx;
			margin-left: 34upx;
			font-size: 60upx;
			font-weight: 500;
			color: #13a467;

			text {
				margin-left: 20upx;
				color: #777d8b;
				font-size: 44upx;
			}

			.desc-login {
				margin-top: 10upx;
				color: #777d8b;
				font-size: 24upx;
				letter-spacing: 2upx;
			}
		}

		.login-btn {
			margin: 78upx auto 40upx;

			width: 622px;
			height: 80px;
			background: #68acff;
			border-radius: 8px 8px 8px 8px;
			opacity: 1;
			font-size: 32px;
			font-family: MiSans-Regular, MiSans;
			font-weight: 400;
			text-align: center;
			color: #ffffff;
			line-height: 80px;

			&.blue {
				background-color: #177fff;
			}
		}

		.server-btns {
			width: 100%;
			padding: 0 64upx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28upx;
			font-family: MiSans-Regular, MiSans;
			font-weight: 400;
			color: #595959;

			&.flex_right {
				justify-content: flex-end;
				color: #8c8c8c;
			}
		}

		.more_login {
			// margin-top: 220px;
			margin-top: 160px;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.text {
				font-size: 28px;
				font-family: PingFang SC-常规体, PingFang SC;
				font-weight: normal;
				color: #8c8c8c;
				// line-height: 36px;
				display: flex;
				align-items: center;

				.line {
					width: 220px;
					height: 2px;
					background-color: #d9d9d9;
				}
			}

			.img {
				margin-top: 24px;
				width: 80px;
				height: 80px;
			}
		}

		.readme {
			margin-top: 20px;
			width: 100%;
			display: flex;
			// flex-direction: row;
			justify-content: center;
			align-items: center;

			.text {
				margin-left: 8px;
				font-size: 24px;
				font-family: MiSans-Regular, MiSans;
				font-weight: 400;
				color: #8c8c8c;
			}
		}
	}
}
</style>
